<template>
  <!-- 直播组件 -->
  <!-- 组件类型: 123 -->
  <div class="vy-cmp-live">
    <div class="vy-cmp-live-container">
      <div class="vy-cmp-live-form">
        <a-form>
          <!-- <a-form-item>
            <a-row>
              <a-icon
                type="info-circle"
                style="transform: rotate(180deg); color: #7A99F7;"
              />
              <span style="color: #BAB7B7; font-size:12px; padding-left: 10px;"
                >系统采用“腾讯会议”作为直播工具。请填写腾讯会议中的直播地址和直播间ID</span
              >
            </a-row>
          </a-form-item> -->
          <a-form-item>
            <a-row>
              <a-col :span="3">
                <span>直播地址</span>&nbsp;<span style="color: red;">*</span>
              </a-col>
              <a-col :span="20">
                <a-input v-model="formData.liveAddress" />
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item>
            <a-row>
              <a-col :span="3">
                <span>直播间ID</span>&nbsp;<span style="color: red;">*</span>
              </a-col>
              <a-col :span="20">
                <a-row>
                  <a-col :span="12">
                    <a-input v-model="formData.liveId" />
                  </a-col>
                  <a-col :span="12">
                    <span
                      style="padding:0 10px; color: #BAB7B7; font-size:12px;"
                      >例如: 346 004 607</span
                    >
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item>
            <a-row>
              <a-col :span="3">
                <span>时间段</span>&nbsp;<span style="color: red;">*</span>
              </a-col>
              <a-col :span="20">
                <a-row>
                  <a-col :span="12">
                    <a-range-picker
                      v-model="formData.liveTime"
                      :disabled-date="disabledDate"
                      :disabled-time="disabledRangeTime"
                      :show-time="{
                        hideDisabledOptions: true,
                        defaultValue: [
                          moment('00:00:00', 'HH:mm:ss'),
                          moment('11:59:59', 'HH:mm:ss'),
                        ],
                      }"
                      :placeholder="['开始时间', '结束时间']"
                      format="YYYY-MM-DD HH:mm:ss"
                      style="width:100%;"
                    />
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item>
            <a-row>
              <a-col :span="3">
                <span>直播类型</span>&nbsp;<span style="color: red;">*</span>
              </a-col>
              <a-col :span="20">
                <a-radio-group v-model="formData.liveType">
                  <a-radio :value="1">
                    腾讯会议
                  </a-radio>
                  <a-radio :value="2">
                    Zoom会议
                  </a-radio>
                </a-radio-group>
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item>
            <a-row>
              <a-col :span="3">
                <span>会议密码</span>
              </a-col>
              <a-col :span="5">
                <a-input style="width:197px;" v-model="formData.livePassword" />
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item class="vy-form-footer">
            <a-button type="primary" @click="click_save_info"
              >保存更改</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
const CMP_TYPE = 123; // 组件类型
import moment from "moment";
export default {
  name: "vy-cmp-live",
  data() {
    return {
      projectId: null, // 项目id
      // 表单字段数据
      formData: {
        liveId: "", // 直播间Id
        liveAddress: "", // 直播地址
        liveTime: [null, null], //直播时间段
        liveType: 1, //直播类型
        livePassword: "", //会议密码
        startTime: "",
        endTime: "",
      },
    };
  },
  watch: {
    "formData.startTime": function(newVal, oldVal) {
      this.formData.liveTime[0] = this.moment(newVal);
      this.$forceUpdate();
    },
    "formData.endTime": function(newVal, oldVal) {
      this.formData.liveTime[1] = this.moment(newVal);
      this.$forceUpdate();
    },
  },
  methods: {
    moment,
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
    disabledDate(current) {      
      return current && current < moment().startOf("day");
    },
    disabledRangeTime(_, type) {
      if (type === "start") {
        return {
          disabledHours: () => this.range(0, 60).splice(4, 20),
          disabledMinutes: () => this.range(30, 60),
          disabledSeconds: () => [55, 56],
        };
      }
      return {
        disabledHours: () => this.range(0, 60).splice(20, 4),
        disabledMinutes: () => this.range(0, 31),
        disabledSeconds: () => [55, 56],
      };
    },
    // 获取主题信息
    getModuleId() {
      return this.themeTab && this.themeTab.id;
    },
    // 创建/更新内容组件
    saveInfo() {
      if (this.formData.liveTime.length === 2) {
        this.formData.startTime = this.formData.liveTime[0].format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.formData.endTime = this.formData.liveTime[1].format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      let params = Object.assign({}, this.formData, {
        moduleType: CMP_TYPE,
        projectId: this.projectId,
        moduleId: this.getModuleId(), // 主题Id
      });
      this.$axios.post("/subassembly/save", params).then((res) => {
        if (res.success) {
          this.$message.success(res.msg);
          setTimeout(() => {
            // 查询已创建的主题模块
            // this.$parent.$parent.queryModuleInfo(CMP_TYPE);
            this.$bus.emit("refreshThemeList"); // 监听主题列表刷新事件
          }, 500);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 保存更改
    click_save_info() {
      this.saveInfo();
    },
  },
};
</script>

<style type="text/css" lang="scss">
.vy-cmp-live {
  width: 100%;
  height: 100%;
  background: #ffffff;
  .vy-form-footer {
    text-align: center;
    margin-bottom: 0;
    .ant-btn {
      padding: 0 100px;
      &.ant-btn-primary {
        background: rgba(51, 102, 255, 1);
        &:hover {
          background: rgba(51, 102, 255, 0.8);
        }
        &[disabled] {
          background: #f5f5f5;
          &:hover {
            background: #f5f5f5;
          }
        }
      }
    }
  }
}
</style>
